<template style="position:fixed; top:100px;">
  <div style="height:6vh; background-color:#fff; padding:10px 20px;">
    <span style="line-height:60px; font-size:20px">用户管理</span>
    <el-button type="primary" style="float:right; margin-top:20px;" @click="beforeAddUser">新建用户</el-button>
  </div>
  <!-- 新建用户弹窗
  :before-close="handlerClose" 在弹窗关闭前先调用handlerClose方法来处理弹窗的关闭问题 避免点击弹窗外面也能关闭弹窗
  -->

  <el-dialog
      :title="dialogTitle"
      style="width:1000px; padding:40px"
      v-model="dialogVisible"
      :before-close="handlerClose">
    <el-form label-position="top" label-width="80px">
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="用户名">
            <el-input placeholder="请输入用户名" v-model="saveUserForm.username" :disabled="saveUserForm.id!=null"></el-input>
          </el-form-item>
        </el-col>
      <el-col :span="12">
        <el-form-item label="手机号">
        <el-input placeholder="请输入手机号" v-model="saveUserForm.phone"></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="12">
         <el-form-item label="邮箱">
           <el-input placeholder="请输入邮箱" v-model="saveUserForm.email"></el-input>
         </el-form-item>
      </el-col>
        <el-col :span="12">
          <el-form-item label="年龄">
            <el-input placeholder="请输入年龄" v-model="saveUserForm.age"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="职级">
            <el-select placeholder="请选择" v-model="saveUserForm.level" @change="loadLeader">
              <el-option v-for="item in levelOptions" :label="item.label" :value="item.value"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="直属领导">
            <el-select placeholder="请选择" v-model="saveUserForm.parentId">
              <el-option  v-for="item in leaderOptions" :label="item.username" :value="item.id"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item label="性别">
            <el-radio-group v-model="saveUserForm.gender">
              <el-radio border label="男" value="1" style="margin-right:0"></el-radio>
              <el-radio border label="女" value="0"></el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
        <el-col :span="5" style="padding-left:0">
          <el-form-item label="用户状态">
            <el-radio-group v-model="saveUserForm.status">
              <el-radio border label="启用" value="1" style="margin:0"></el-radio>
              <el-radio border label="禁用" value="0"></el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <template #footer>
      <el-button @click="handlerClose">取消</el-button>
      <el-button type="primary" @click="saveUser">保存</el-button>
    </template>
  </el-dialog>

  <!-- 用户搜索卡片 -->
  <el-card style="margin:20px; height:70px">
    <el-form :inline="true">
      <el-form-item label="用户搜索" style="width:220px">
        <el-input placeholder="请输入用户名" style="width:220px" v-model="searchUserForm.username" @keydown.enter="loadUser"></el-input>
      </el-form-item>
      <el-form-item label="用户状态" style="width:220px">
        <el-select placeholder="请选择用户状态"  v-model="searchUserForm.status" @change="loadUser">
          <el-option v-for="item in userStatus" :label="item.label" :value="item.value"></el-option>
<!--          <el-option label="启用" value="1"></el-option>-->
<!--          <el-option label="禁用" value="0"></el-option>-->
        </el-select>
      </el-form-item>
      <el-form-item>
       <el-button @click="resetSearch">重置</el-button>
       <el-button type="primary" @click="loadUser">查询</el-button>
      </el-form-item>
    </el-form>
  </el-card>
  <!-- 用户列表卡片 -->
  <el-card style="margin:20px;">
    <el-table :data="userArr">
      <el-table-column type="index" label="编号" width="80" align="center"></el-table-column>
      <el-table-column prop="username" label="用户名" align="center"></el-table-column>
      <el-table-column prop="phone" label="手机号" align="center"></el-table-column>
      <el-table-column prop="createTime" label="加入时间" align="center"></el-table-column>
      <el-table-column prop="createTime" label="用户状态" align="center">
        <template #default="scope">
          <!-- scope.row 表示表格中当前行的用户对象，也就是后端返回的userVO-->
          <el-switch active-value="1" inactive-value="0" v-model="scope.row.status" @change="changeStatus(scope.row.id,scope.row.status)"></el-switch>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center">
        <template #default="scope">
          <el-button link type="primary" :disabled="scope.row.level==40" @click="resetPassword(scope.row.id)">密码重置</el-button>
          <el-button link type="primary" :disabled="scope.row.level==40" @click="editUser(scope.row.id)">编辑</el-button>
          <el-button link type="primary" :disabled="scope.row.level==40" @click="deleteUser(scope.row.id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

  </el-card>

</template>

<script setup>
  import {onMounted, ref} from "vue";
  import {ElMessage} from "element-plus";
  import axios from "axios";
  import qs from "qs";

  //定义变量控制弹窗是否出现
  const dialogVisible = ref(false);
  //定义变量来控制谈篡改的标题
  const dialogTitle = ref('新建用户');

  //定义数组用来维护员工职级的选项
  const levelOptions = ref([
    // {label:'员工',value:'10'},
    // {label:'经理',value:'20'},
    // {label:'总监',value:'30'},
    // {label:'总裁',value:'40'},
  ]);
  //定义数组用来维护员工直属领导的选项
  const leaderOptions = ref([]);
  //定义对象用来保存新建用户的信息
  const saveUserForm = ref({
    username:'',phone:'',email:'',age:'',level:'',parentId:'',gender:'',status:''
  })
  //点击新建用胡按钮 出弹窗+修改弹窗标题
  const beforeAddUser = ()=>{
    dialogVisible.value = true;
    dialogTitle.value = '新建用户';
  }
  //定义保存用户的方法
  const saveUser = ()=>{
    //console.log(saveUserForm.value);
    /* 安装 查询字符串框架qs 执行命令npm install qs  注意：qs需要导入 import qs from "qs";
       使用qs框架将JS对象转为查询字符串格式( name=tom&age=18 ...) 后端工程不能加@RequestBody注解
    */
    let data = qs.stringify(saveUserForm.value)
    axios.post(BASE_URL+'/v1/user/save',data)
         .then((response)=>{
           if(response.data.code == 2000){
             ElMessage.success('保存成功');
             //关闭弹窗，并情况双向绑定的表单数据
             dialogVisible.value = false;
             saveUserForm.value={};
             //保存成功后需要重新加载用户数据才能即时反馈
             loadUser();
           }else{
             ElMessage.error(response.data.msg);
           }
         });
  }
  //处理弹窗关闭的方法
  const handlerClose = () => {
    if(confirm('请确认是否关闭窗口')){
      //关闭弹窗，并情况双向绑定的表单数据
      dialogVisible.value = false;
      saveUserForm.value={};
    }
  }
  //定义对象用来保存用户的查询条件
  const searchUserForm = ref({username:'',status:''});
  //定义对象数组用来保存查询到的用户表格数据
  const userArr = ref([]);
  //定义加载用户列表的方法
  const loadUser = ()=>{
    let data = qs.stringify(searchUserForm.value)
    //如果有查询条件，就根据后面凭借的条件查询，没有条件默认加载所有用户数据
    axios.get(BASE_URL+'/v1/user/select?'+data)
         .then((response)=>{ //回调函数处理响应结果
           if(response.data.code == 2000){
             userArr.value = response.data.data; //将后端响应数据装入数组中
           }else{
             ElMessage.error(response.data.msg); //没有数据则获取后端响应的错误消息
           }
         })
  };
  //定义重置搜索条件的方法
  const resetSearch = ()=>{
    //清空之前的搜索条件
    searchUserForm.value={};
    //重新加载所有的用户数据
    loadUser();
  };
  const userStatus = ref([]);
  //页面一加载完毕，立即执行 onMounted 需要导入才能使用
  onMounted(()=>{
    loadUser();
    loadDictOption(levelOptions,'user_level');
    loadDictOption(userStatus,'general_status');
  })
  //定义一个加载直属领导数据的方法
  const loadLeader = ()=>{
    //优化：如果已经选择了直属领导数据需要再次重新选择的话就需要将之间已加载的领导数据和已选择的直属领导数据清空
    leaderOptions.value = [];
    saveUserForm.value.parentId = '';
    //拿到当前的员工职级(当前员工的职级+10才是所有可选直属领导的职级)
    let level = parseInt(saveUserForm.value.level)+10;
    axios.get(BASE_URL+'/v1/user/select?level='+level)
      .then((response)=>{
        if(response.data.code == 2000){
          leaderOptions.value = response.data.data;
        }else{
          ElMessage.error(response.data.msg);
        }
      })
  }
  //定义重置密码的方法  restful风格: 在前端路径全是/password/userId连接 在后端路径上用{userId} 方法参数上需要@PathVariable注解
  const resetPassword = (userId)=>{
    axios.post(BASE_URL+'/v1/user/update/password/'+userId)
         .then((response)=>{
         if(response.data.code == 2000){
           ElMessage.success('密码重置成功!');
         } else{
           ElMessage.error(response.data.msg);
         }
    })
  }
  //定义编辑用户的方法
  const editUser = (id)=>{
    //点击编辑 出弹窗+修改弹窗标题
    dialogVisible.value = true;
    dialogTitle.value = '编辑用户';
    //根据用户id查询当前用户的详细数据显示在弹窗表单中
    axios.get(BASE_URL+'/v1/user/select?id='+id)
         .then((response)=>{
           if(response.data.code == 2000){
             //注意：后端select方法返回的是List<UserVO>集合类型,因此需要获取数据时得通过下标 data[0]也就是java中list.get(0)
             saveUserForm.value = response.data.data[0];
             //拿到当前的员工职级(当前员工的职级+10才是所有可选直属领导的职级)
             let level = parseInt(saveUserForm.value.level)+10;
             axios.get(BASE_URL+'/v1/user/select?level='+level)
                 .then((response)=>{
                   if(response.data.code == 2000){
                     leaderOptions.value = response.data.data;
                   }else{
                     ElMessage.error(response.data.msg);
                   }
                 })
           }else{
             ElMessage.error(response.data.msg);
           }
         })
  }
  //定义修改员工状态的方法
  const changeStatus = (userId,status)=>{
    //restful风格 /v1/user/update/status/"+userId+"/"+status
    axios.post(BASE_URL+"/v1/user/update/status/"+userId+"/"+status)
         .then((response)=>{
           if(response.data.code == 2000){
             ElMessage.success("修改状态成功");
           }else{
             ElMessage.error(response.data.msg);
           }
         })
  }
  //定义删除员工的方法
  const deleteUser = (userId)=>{
    axios.post(BASE_URL+"/v1/user/delete/"+userId)
         .then((response)=>{
           if(response.data.code == 2000){
             confirm("请确认是否删除？")
             ElMessage.success('删除用户成功！');
             loadUser();
           }else{
             ElMessage.error(response.data.msg);
           }
         })
  }
</script>

<style scoped>

</style>